My First Homepage

************************** * BASIC HTML TAGS * * by Syaf * ************************** version 1.0 ----------------------------------------------------------------------------- Contents ----------------------------------------------------------------------------- - Introduction - What you need : Requirements - Tutorial > How to start > Making A Title > The Tag > Links > Fonts > Image > Tables - Tag References - Copyrights - Contacts - Websites ----------------------------------------------------------------------------- Introduction ----------------------------------------------------------------------------- Hiya! HTML is short for HyperText Markup Language. It is the easiest programming language known. HTML are recognized by 'TAGS' and it consists of mainly words between these 'TAGS'. An example of a tag is . Most HTML starts with a tag and ends with one. To close a tag or to end a command, the same tag is usually applied with simply adding a '/' at the front. An example is . Basically, HTML commands open and closest with the simplest tags you can think of. Here you will learn the basic tags of HTML commands. ----------------------------------------------------------------------------- What you need - Requirements ----------------------------------------------------------------------------- - A Text Editor, preferably Notepad or Wordpad. (You can find this in Windows through Start>Programs>Accessories>) - An Internet Browser (Internet Explorer, Netscape, Opera etc.) - Keyboard : for typing (duh~) - Basic HTML Knowledge (dont worry, you'll learn it soon :) ) PS: You might also need a relaxed mind coz this will give your mind a bit of an exercise, but it's purely simple once you get through it. Just make sure you follow each step. ----------------------------------------------------------------------------- Tutorial ----------------------------------------------------------------------------- ------------------------------------ HOW TO START ------------------------------------ Includes: - Creating a new directory for homepage - Creating and saving a .html file ------------------------------------ Ryte, Hello! Now you are here to learn HTML ryte?? The harder way of dealing with Website designing? Good for you. Because if you are looking for the easier way there's always Frontpage or Dreamweaver or other third party homepage editor out there!! Heck why make your life tougher when you can make it easier?? Go now, you still have the chance to turn away. Go!! Shoo!! Get out of here!! Still here huh? fine, I cant stop you then. It's your life. But you made the right choice. Knowing how to design a website through a homepage editor doesnt mean you can make a good website designer. A homepage editor also involves HTML though you do not need to have the knowledge but having it can be very handy. Okay let's begin. First you need to open your text editor (I will be using notepad here so whenever i say notepad it really means the text editor your using). Ryte, now make a new file (File>New) in notepad. Now CREATE a new DIRECTORY in C:\ or wherever you want to save your files later on. Here, let us create a directory called 'homepage' and save it in C:\. What?!?! You have no idea what a directory is?! It's a 'NEW FOLDER'! Go and open Windows Explorer: (START>PROGRAMS> for Windows 95/98/2k) (START>PROGRAMS>ACCESSORIES> for Windows ME) (START>ALL PROGRAMS>ACCESSORIES> for Windows XP) Click on (C:). The right click on the right panel of Windows Explorer. (The part where it shows the files in your C:\). Then click on New>Folder. Voila!! You just created a new directory. Now name this as 'homepage'. ------------------------------------ MAKING A TITLE ------------------------------------ Includes: - Brief intros to: - Tags - Tags - tags - Creating 'My First Homepage' ------------------------------------ Alryte, let's go on. Go back to notepad. Click FILE>SAVE AS...> and save this file to the directory you just made. Look for it. Find it. It shouldnt be that hard. It's C:\homepage\ remember?? Before you save it, name this file you just saved as 'index.html'. Where you type this? You type it ryte after you click on SAVE AS... and in the File Name section. Okay remember the '.html' part or else this wont work. Remember, the file name was 'index.html'. Okay now that you have saved it let's get going to the programming bit. Type the following into notepad: --------------------------------------------------------- --------------------------------------------------------- Good, you've done your first HTML programming so far. Now SAVE (FILE>SAVE or press CTRL+S). Remember, always save your document. What you just typed in are known as HTML tags. They are the commands used for HTML programming. Every html document must start with and ends with . Tags with '/' are used to close or end a command, therefore ends your HTML programming. The section is the head part of your document. This is where things such as Titles, scripts and many other tags that you dont want to appear in the browsers are kept. The section is the header of the document. Like all heads, they must have a body (well almost all heads). Same goes to HTML. The section is where most of your tags will be kept. Things that appears in your internet browsers are kept here like images, links and ofcourse text. Now let's continue, shall we? Between the section type My First Homepage . This will look like as follows: --------------------------------------------------------- My First Homepage --------------------------------------------------------- Now open your Internet Explorer (or watever browser you use, here I will use Internet Explorer). Type "C:\homepage\index.html" without the quotes in the address bar or open your html file by clicking FILE>OPEN> and look for your index.html file. You are now looking at a blank Internet Explorer but you can see at the title bar of Internet Explorer (It's at the top most part of the browser if you still cannot find it) where it says 'My First Homepage'. There you go. You proud of yourself yet? Don't be, coz that's only the beginning. Now let's go to the body section. ------------------------------------ THE TAG ------------------------------------ Includes: - body elements - defining background, text, link colors - putting a background image - typing text into the homepage ------------------------------------ Most tags can be added more functions to it. The tag is one of those common tags that you add functions or generally known as attributes into it. It looks like this. --------------------------------------------------------- --------------------------------------------------------- Dont worry if you dont understand that, i'll explain them to you. The tag tells your browser that here starts the body of your document, therefore telling it that this is where it starts viewing the documents you want visible to your visitors. The tag includes elements like 'BGCOLOR', 'TEXT', 'LINK' etc. that defines how you browser will view your website. BGCOLOR sets the background colour of your homepage. New browsers like Internet Explorer 5 or higher defines the word 'black' as the color black. Old browsers defines '#000000' as black but you won't need to know that for now. TEXT sets the text color of your homepage. If you define it as 'white' the whole text in your website will be white. If you type green, they will be green. LINK, VLINK and ALINK defines the colors for your links. I will cover links later on. LINK defines the color for your normal link. VLINK means Visited Link thus defining the colors for links that visitors have already visited. ALINK defines the colors of an active link. Hover your mouse over your link and it will show this color. You can type mostly all normal colors and you can also try 'brightblue' or 'lightblue'. Do some experimenting then you'll know which colors work. To know more advance techniques on using all 24 million colours, you'll need to know the six digit color codes. That's the one i told you earlier but that's a whole different topic. This tutorial only involves with Basic HTML. If you want an image instead of a color as your homepage's background add BACKGROUND="LINK OF IMAGE" into the body tag. Then you will have something like this: --------------------------------------------------------- --------------------------------------------------------- where 'myimage.jpg' is the name of the file of your image. To view this image into your browser, the image has to be in the same directory as your index.html. Try copying an image file into C:\homepage\ and type the name of the file into BACKGROUND. Remember, you can only use files with the extentions .JPG, .GIF, .BMP or .PNG. Use the correct extention. Below your tag, go type 'Welcome to my first homepage.' without the quotes. Save. Now go to your Internet Explorer and view your index.html again or refresh it (CTRL+R). You will see ur background and your text 'Welcome to my first homepage' in the color you have defined. Now do some experiment first before you continue. Your index.html should look something like this: --------------------------------------------------------- My First Homepage Welcome to my first homepage. --------------------------------------------------------- If it does, and your image shows as a background then good. You have done well so far. Have a bit of a rest for now or continue if you can take it. ------------------------------------ LINKS ------------------------------------ Includes: - defining a link - creating a second homepage - the
and

tags ------------------------------------ Ryte, now i want you to open a new notepad. Do not close the window or notepad that has your index.html. Just go to your start button and open another notepad. You get me?? Good. Now in your new notepad, after creating a new file type the following: --------------------------------------------------------- MY SECOND HOMEPAGE You have come to my second homepage. --------------------------------------------------------- When you are done with that save this file as 'index2.html'. Good you've got your second website saved. Now go back to your 'index.html'. There, do as follows between your and tags: --------------------------------------------------------- Welcome to my first homepage.
Go to my 2nd homepage --------------------------------------------------------- Good. Save it. Remember to do this before you view your homepage in your browser. Now go to your internet explorer and you will see that the 'Go to my 2nd homepage' text is in different color than your normal text and is then clickable. Click on the text. You will then view your index2.html. This is called a link. the tag is an anchor. It links to your current website to another link. If you want to like a text to cnn's website you can type 'http://www.cnn.com' instead of index2.html. Now you get how the anchor tag works? Good, this is hard work. Let's move on. The
tag defines a break in your text, thus moving your second sentence below your first, thus calling
the break tag. To define a paragraph you can set it with a

tag, known as the paragraph tag. Go back to your index.html file in notepad. Do some changes so that it looks like below: ---------------------------------------------------------

Welcome to my first homepage. Below is a link to my second homepage. Please click on it if you would like to view it. It contains nothing and will still contain nothing until i do something about it. So please be patient for now as I read the tutorials about this HTML designing.

Thank you for you cooperation.

Go to my 2nd homepage --------------------------------------------------------- Good. Now save your file and go to IE (Internet Explorer). View your file. Now you will see that there are gaps between your first paragraph, your second and the link. You can also do this with
but you will have to put two
tags like this: --------------------------------------------------------- Welcome to my first homepage. Below is a link to my second homepage. Please click on it if you would like to view it. It contains nothing and will still contain nothing until i do something about it. So please be patient for now as I read the tutorials about this HTML designing.

Thank you for you cooperation.

Go to my 2nd homepage --------------------------------------------------------- There you go. Next! ------------------------------------ FONTS ------------------------------------ Includes: - Bold, Italic, Underline text - the tag - changing font sizes and colors - tag ------------------------------------ Fonts are nice and help your homepage look more beautiful for the eyes to see. If you want a text to be bold simply add Text here between the text you want bold. If you want it to be italic use Text here while underlining them goes like Text here. So if you want all bold, italic and underline for a text it looks like as follows: --------------------------------------------------------- This is my first homepage. --------------------------------------------------------- For font sizes you can use the tag. Go to your index.html file and follow the tags below for you body. --------------------------------------------------------- Welcome to my first homepage

Below is a link to my second homepage. Please click on it if you would like to view it. It contains nothing and will still contain nothing until i do something about it. So please be patient for now as I read the tutorials about this HTML designing.

Thank you for you cooperation.

Go to my 2nd homepage --------------------------------------------------------- Save and view it in IE. You can also define a specific text or sentence so that it will show a different color. Follow the following example: --------------------------------------------------------- Welcome to my first homepage

Below is a link to my second homepage. Please click on it if you would like to view it. It contains nothing and will still contain nothing until i do something about it. So please be patient for now as I read the tutorials about this HTML designing.
Thank you for you cooperation.

Go to my 2nd homepage --------------------------------------------------------- Again save and view it in IE. You can see that the 'Welcome to my first homepage' is in gold color. Congratulations! Now you know how to change font sizes and colors!! Let's spice up the page a bit. Put before and after in your first sentence. It will look something like this: --------------------------------------------------------- Welcome to my first homepage

Below is a link to my second homepage. Please click on it if you would like to view it. It contains nothing and will still contain nothing until i do something about it. So please be patient for now as I read the tutorials about this HTML designing.
Thank you for you cooperation.

Go to my 2nd homepage --------------------------------------------------------- Save and view it in your browser. Voila!! The text is not in the center making it look like a true title! If you are able to view it as i have described it then good, you have done well my student. *grin* That leaves posting an image and tables. Okay let's continue! ------------------------------------ IMAGE ------------------------------------ Includes: - posting an image - using an image as a link ------------------------------------ Now you will learn how to put an image into your homepage. You will need the following tag: --------------------------------------------------------- --------------------------------------------------------- The 'IMAGE' part is where you type the filename of your image. Copy an image file into your homepage directory (C:\homepage\). Now type the filename of the image in the "IMAGE" section above. Say the filename is called 'myphoto.jpg', then type as follows: --------------------------------------------------------- --------------------------------------------------------- make sure the lowercases and uppercases are correct for both filename and extention. Say the name of the file is 'MyPhoTo.JPG' then type 'MyPhoTo.JPG', do not type 'myphoto.jpg' or else the image will not appear. Now you will have something like this: --------------------------------------------------------- Welcome to my first homepage

Below is a link to my second homepage. Please click on it if you would like to view it. It contains nothing and will still contain nothing until i do something about it. So please be patient for now as I read the tutorials about this HTML designing.
Thank you for you cooperation.

Go to my 2nd homepage

--------------------------------------------------------- When done correctly you will be able to view the image in your homepage after you save your index.html. Now do this instead: --------------------------------------------------------- Welcome to my first homepage

Below is a link to my second homepage. Please click on it if you would like to view it. It contains nothing and will still contain nothing until i do something about it. So please be patient for now as I read the tutorials about this HTML designing.
Thank you for you cooperation.

Go to my 2nd homepage

--------------------------------------------------------- Note that the tag is after the tag and that the tag is after the homepage tag. Save and go to your browser. You will see that the image has become a link! Well done!! ------------------------------------ TABLES ------------------------------------ Includes: - tags and its elements ------------------------------------ Tables are very useful. It can help you make your homepage look more better, with a bit of creativity put in mind. Look at the following: ---------------------------------------------------------

--------------------------------------------------------- defines the table row. defines the table data. With that in mind you might be able to get two and two together. If you still have no idea then experiment. It does not hurt to try. Just remember, comes before. I'll give you the following for an example and then it is up to you with your homepage. ---------------------------------------------------------

FIRST DATA OF FIRST ROW SECOND DATA OF FIRST ROW

FIRST DATA OF SECOND ROW

SECOND DATA OF SECOND ROW

--------------------------------------------------------- Good luck and have fun!! ----------------------------------------------------------------------------- Tag Reference ----------------------------------------------------------------------------- Below are reference to the simple and basic tags you will need to learn in a short time. They are most of the things that are usually used during HTML programming. ... ... <BODY> ... </BODY> <A HREF="link"> ... </A> ... ... ... <CENTER> ... </CENTER> ... <IMAGE SRC="link"> ... <TABLE><TR><TD> ... </TD></TR></TABLE> ----------------------------------------------------------------------------- COPYRIGHTS ----------------------------------------------------------------------------- This tutorial is a copyright of TotallyCows Coexistence 2002. This tutorial was originally done by Syaf. Please contact contact@syafstudio.cjb.net for details if you want to post this tutorial on your website or print it out. Posting it online and printing it without the right authority will break the copyright law of the world wide web. This Tutorial is protected by WWW Law. If you found this tutorial somewhere else other than these websites: http://www.totallycows.cjb.net http://totallycows.tripod.com http://www.syafstudio.cjb.net please contact: complain@totallycows.cjb.net immediately. We would be grealty appreciated for your support. TotallyCows : Coexistence All Rights Reserved. ----------------------------------------------------------------------------- CONTACTS ----------------------------------------------------------------------------- Totallycows: contact@totallycows.cjb.net Send your complains to: complain@totallycows.cjb.net Syaf: contact@syafstudio.cjb.net ----------------------------------------------------------------------------- WEBSITES ----------------------------------------------------------------------------- http://www.totallycows.cjb.net http://www.syafstudio.cjb.net Thank you for your support. ----------------------------------------------------------------------------- END -----------------------------------------------------------------------------

FIRST DATA OF FIRST ROW	SECOND DATA OF FIRST ROW
FIRST DATA OF SECOND ROW	SECOND DATA OF SECOND ROW